<template>
  <div>
    <div style="display: flex;">
        <searchChannel @treeSelectEmit="handleTreeSelect"></searchChannel>
        <div style="width: calc( 100% - 260px )">
        <!--引用表格-->
          <BasicTable @register="registerTable" :rowSelection="rowSelection" >
            <!--插槽:table标题-->
              <template #tableTitle>
                  <a-button type="primary" @click="batchAuth" preIcon="ant-design:plus-outlined"> 批量授权</a-button>
                  <a-button type="primary" @click="batchCancelAuth" preIcon="ant-design:delete-outlined"> 批量撤权</a-button>
                  
              </template>
              <!--操作栏-->
              <template #action="{ record }">
                <!-- <TableAction v-if="record.id" :actions="getTableAction(record)"/> -->
                <TableAction  :actions="getTableAction(record)"/>
              </template>
              <!--字段回显插槽-->
              <template v-slot:bodyCell="{ column, record, index, text }">
              </template>
          </BasicTable>
        </div>

      

    </div>
  
    <!-- 表单区域 -->
    <generalAuthorizationModal @register="registerModal" @success="handleSuccess"></generalAuthorizationModal>
    <rowAuthorizationModal @register="registerRowModal" @success="handleSuccess"></rowAuthorizationModal>
    <rowDeviceResult @register="registerRowDevModal" @success="handleSuccess"></rowDeviceResult>
  </div>
</template>

<script lang="ts" name="channel-generalAuthorization" setup>
  import {ref, reactive, computed, unref,watch} from 'vue';
  import { toRaw } from '@vue/reactivity';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import {useModal} from '/@/components/Modal';
  import { useDrawer } from '/@/components/Drawer';
  import { useListPage } from '/@/hooks/system/useListPage';
  import generalAuthorizationModal from './components/generalAuthorizationModal.vue';
  import rowAuthorizationModal from './components/rowAuthorizationModal.vue';
  import searchChannel from './components/searchChannel.vue';
  import rowDeviceResult from './components/rowDeviceResult.vue';
  import {columns, searchFormSchema, superQuerySchema} from './generalAuthorization.data';

  import {
    list,
    getImportUrl,
    getExportUrl,
    deleteBatchAuth,
  } from './generalAuthorization.api';
  import { downloadFile } from '/@/utils/common/renderUtils';
  import { useUserStore } from '/@/store/modules/user';
  import {useMethods} from "@/hooks/system/useMethods";
  import {useMessage} from "@/hooks/web/useMessage";

  const queryParam = reactive<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  const userStore = useUserStore();
  const { createMessage, createErrorModal,createWarningModal,createInfoModal } = useMessage();
  //注册model
  const [registerModal, {openModal}] = useModal();
  const [registerRowModal, {openModal: openRowModal}] = useModal();
  const [registerRowDevModal, {openModal: openRowDevModal}] = useModal();
  // const [registerRowDevModal, {openDrawer: openRowDevModal}] = useDrawer();
  //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '人员',
           api: list,
           columns,
           rowKey:'id',
           canResize:false,
           formConfig: {
              //labelWidth: 120,
              schemas: searchFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
            actionColumn: {
               width: 220,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            },
      },
  })

  const [registerTable, {reload,getForm},{ rowSelection, selectedRowKeys }] = tableContext

  
  // 高级查询配置
  const superQueryConfig = reactive(superQuerySchema);

  async function handleTreeSelect(e){
    console.log(e);
    let { getFieldsValue,setFieldsValue,submit } =  getForm()
    let data = getFieldsValue()
    data.channelId = e[0]
    console.log(data);
    await setFieldsValue(data)
    await submit()
  }
  

 
  function batchAuth() {
     openModal(true, {
       isUpdate: true,
       showFooter: true,
     });
  }
   /**
    * 编辑事件
    */
  function singleAuth(record: Recordable) {
    //  if(!record.id) return createMessage.error('需要授权后才能编辑')
     openRowModal(true, {
       record,
       isUpdate: true,
       showFooter: true,
     });
   }

   function handleDevResult(record) {
     openRowDevModal(true, {
      //  record,
      id: record.id,
       isUpdate: true,
       showFooter: true,
     });
   }

   /**
    * 成功回调
    */
  function handleSuccess() {
      (selectedRowKeys.value = []) && reload();
   }
   /**
      * 操作栏
      */
  function getTableAction(record){
       return [
         {
           label: '授权编辑',
           onClick: singleAuth.bind(null, record),
         },
          {
           label: '下发状态',
           onClick: handleDevResult.bind(null, record),
         }
       ]
   }

  function batchCancelAuth(){
     let selectIds = toRaw(rowSelection.selectedRowKeys)
     console.log(selectIds);
      if(selectIds.length==0) return createMessage.warning('请先选择人员');
      deleteBatchAuth({listId: selectedRowKeys.value}, handleSuccess)
  }

</script>

<style scoped>

</style>
